<template>
	<view class="container">
		<u-popup :show="isShowPop" round="10" @close="closePop" mode="center">
			<u-form ref="form" labelPosition="left" :model="formData" labelWidth="1">
				<view class="modal">
					<view class="modal-header">
						<text class="title">{{popTitle}}</text>
						<u-icon class="close-icon" name="close" size="20" @click="closePop"></u-icon>
					</view>
					<view class="modal-body">
						<view class="select-box" v-for="(item,idx) in selectArr" :key="idx">
							<view :class="['select-item',{'active':item.value == selectedId}]" @click="handleSelect(item)">
								{{item.label}}
							</view>
						</view>


					</view>
					<view class="modal-footer">
						<u-button class="cancel-btn" color="#295EFF" :plain="true" type="primary" @click="closePop">取消</u-button>
						<u-button class="submit-btn" type="primary" @click="submitTypeAndIndustry">确定</u-button>
					</view>
				</view>
			</u-form>
		</u-popup>
	</view>
</template>

<script>
	import { industryOptions, industryTypeOptions } from '@/config/industry-config';
	export default {
		props: {
			formData: {},
			isShowPop: {
				type: Boolean,
				default: false
			},
			popTitle: {
				type: String,
				default: ''
			}
		},
		  computed: {  
		    selectArr() {  
		      return this.popTitle == '选择行业'? industryOptions : industryTypeOptions
		    },  
		  },  
		data() {
			return {
				selectedId: '',
			};
		},
		methods: {

			handleSelect(item) {
				this.selectedId = item.value
			},

			submitTypeAndIndustry() {
				let params = {
					popTitle: this.popTitle,
					data: this.selectedId
				}
				this.$emit('confirmPop', params)
				this.selectedId = ''
			},
			closePop() {
				console.log('')
				this.selectedId = ''
				this.$emit('closePop')
			}
		}
	};
</script>

<style scoped lang="scss">
	.container {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100vh;
		background-color: rgba(0, 0, 0, 0.5);
	}

	.modal {
		/* width: 80%; */
		width: calc(100vw - 100rpx);
		box-sizing: border-box;
		background-color: #fff;
		border-radius: 10px;
		padding: 32rpx 54rpx;
		// box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
		position: relative;
	}

	.active {
		color: #FFFFFF !important;
		background-color: #295EFF;
		border: 2rpx solid #295EFF !important;
	}

	.modal-header {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-bottom: 20px;
	}


	.title {
		font-size: 36rpx;
		font-weight: bold;
	}

	.close-icon {
		position: absolute;
		top: 32rpx;
		right: 32rpx;
	}

	.modal-body {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		/* margin-bottom: 32rpx; */
	}

	.select-box {
		width: 33.3%;
	}

	.select-item {
		width: 160rpx;
		height: 46rpx;
		line-height: 46rpx;
		text-align: center;
		border: 2rpx solid #8C8C8C;
		border-radius: 40rpx;
		color: #8C8C8C;
		font-size: 28rpx;
		margin-bottom: 24rpx;
		/* margin: 0 20rpx; */
	}

	.modal-footer {
		display: flex;
		justify-content: space-between;
		margin-top: 12rpx;
	}

	.submit-btn {
		/* margin-top: 32rpx; */
		width: 45%;
		height: 76rpx;
		border-radius: 50rpx;
		font-size: 32rpx;
		background-color: #295FFF;
		border: 2rpx solid #295FFF !important;
	}

	.cancel-btn {
		width: 45%;
		height: 76rpx;
		border-radius: 50rpx;
		border: 2rpx solid #295FFF !important;
		color: #295EFF !important;
	}
</style>
